<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      [v-cloak] {
        diplay: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--使用v-cloak 能够解决 插值表达式闪烁的问题-->
      <p v-cloak>+++{{msg}}----</p>
      <h4 v-text="msg">====</h4>
      <!--默认 v-text 是没有闪烁问题的-->
      <!--v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的
       内容清空 -->
      <div>{{msg2}}</div>
      <div v-text="msg2"></div>
      <div v-html="msg2"></div>

      <!--v-bind:是 Vue中，提供的用于绑定属性的指令 去data中找对应属性 把属性值赋值过来-->
      <!--<input type="button" value="按钮" v-bind:title="mytitle+'123'">-->
      <!--注意：v-bind: 指令可以被简写为 :要绑定的属性-->
      <!--v-bind 中，可以写合法的JS表达式-->
      <input type="button" value="按钮1" :title="mytitle+'1234'" />

      <!--Vue 中提供了 v-on: 事件绑定机制  与v-bind一样 当成变量处理 去 methods 中找方法-->
      <!--<input type="button" value="按钮2" :itle="mytitle+'123'" v-on:click="alert('hello')">-->

      <input type="button" value="按钮3" @click="show" />
    </div>

    <script src="./lib/vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "123",
          msg2: "<h1>我是H1</h1>",
          mytitle: "我自己的title"
        },
        methods: {
          // 这个methods属性中定义了当前Vue实例所有可用的方法
          show: function() {
            alert("hello");
          }
        }
      });

      // vue 不提倡操作dom
      // document.getElementById('btn').onclick = function () {
      //     alert('hello')
      // }
    </script>
  </body>
</html>

<!--1.如何定义一个基本的Vue代码结构-->
<!--2.插值表达式 和 v-text -->
<!--3.v-cloak 防止插值表达式闪烁问题-->
<!--4.v-html-->
<!--5.v-bind Vue提供的属性绑定机制 缩写是:-->
<!--6.v-on Vue提供的事件绑定机制 缩写是 @-->
